import { memo } from 'react'
import type { FC } from 'react'
import { useSetState } from 'ahooks'
import { Form } from 'antd'
import { Editor } from '../education/edit'
import styles from './index.module.scss'
import Input from '@/app/components/Input'

const list = [
  {
    name: '英语四级',
    selected: false,
  },
  {
    name: '英语六级',
  },
  {
    name: '计算机一级',
  },
  {
    name: '计算机二级',
  },
  {
    name: '计算机三级',
  },
  {
    name: '计算机四级',
  },
  {
    name: '普通话一级',
  },
  {
    name: '普通话二级',
  },
]

interface IndexProps {
  displayName: string
}
function Selection(props: any) {
  const [state, setState] = useSetState<{ credential: any[];name: string }>({
    credential: list,
    name: '',
  })

  const isSelect = (name: string) => {
    if (!props.value)
      return false
    return props.value.findIndex((t: any) => t.name === name) !== -1
  }
  const remove = (name: string) => {
    props.onChange(props.value.filter((item: any) => item.name !== name))
  }
  const onAdd = () => {
    if (!state.name)
      return
    if (props.value && props.value?.findIndex((t: any) => t.name === state.name) !== -1) {
      return
    }
    props.onChange([...(props.value || []), { name: state.name }])
    setState({ name: '' })
  }
  const choose = (item: any) => {
    if (props.value && props.value?.findIndex((t: any) => t.name === item.name) !== -1) {
      return
    }
    props.onChange([...(props.value || []), item])
  }
  return <div>
    <div className={styles.flex}>
      {state.credential.map((item, index) => {
        const selected = isSelect(item.name)
        return (
          <div
            key={item.name}
            className={
              selected ? ` ${styles.flexItem} ${styles.selected}` : `${styles.flexItem}`
            }
            onClick={() => choose(item)}
          >
            {item.name}
          </div>
        )
      })}
    </div>
    <div className={styles.addCertificate}>
      <input
        className={styles.input}
        value={state.name}
        onChange={(e) => {
          setState({
            name: e.target.value,
          })
        }}
        placeholder="请输入自定义名称"
      />
      <div
        className={
          state.name
            ? `${styles.btn}`
            : `${styles.btn} ${styles.forbid}`
        }
        onClick={onAdd}
      >
						+添加自定义荣誉证书
      </div>
    </div>
    <div className={styles.selectedItemWraper} >
      {props.value?.map((item: any) => {
        return (
          <div key={item.name} className={styles.selectedItem}>
            <span className={styles.name}> {item.name}</span>
            <svg className={styles.remove} onClick={() => remove(item.name)} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><path stroke="currentColor" strokeLinecap="round" fill='none' strokeLinejoin="round" strokeWidth="1.5" d="M13.38 7.258s-.361 4.49-.571 6.382c-.1.903-.658 1.432-1.572 1.449-1.74.031-3.481.033-5.22-.003-.88-.018-1.428-.554-1.526-1.442-.211-1.908-.571-6.386-.571-6.386M14.302 5.106H2.997M12.124 5.106c-.523 0-.974-.37-1.076-.883l-.162-.81a.853.853 0 00-.825-.633H7.24a.853.853 0 00-.825.632l-.162.811a1.099 1.099 0 01-1.076.883"></path></svg>
          </div>
        )
      })}
    </div>
  </div>
}
const Index: FC<IndexProps> = ({ displayName }) => {
  return <>
    <div style={{ margin: '10px 10px 20px', fontWeight: 'bold', fontSize: '16px' }}>{displayName}</div>
    <Form.Item name={'description'} label=''>
      <Editor />
    </Form.Item>
    <Form.Item name={'description'} hidden>
      <Input />
    </Form.Item>
    <Form.Item name={'list'} >
      <Selection />
    </Form.Item>
  </>
}

export default memo(Index)
